<template>
	<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
		<view class="cu-bar fixed" :style="{height:`${CustomBar}px`,paddingTop:`${StatusBar}px`}" :class="bgColor">
			<!-- #ifndef MP-WEIXIN -->
				<view class="action" @tap="goback()" v-if="isBack">
					<text class="cuIcon-back"></text>
					<slot name="backText"></slot>
				</view>
			<!-- #endif -->
			
			<!-- #ifdef MP-WEIXIN -->
			<view class="action border-custom" v-if="isCustom" :style="{width:'80px',height:'32px',marginLeft:'20rpx',backgroundColor:'rgba(255,255,255,0.6)'}">
				<text class="cuIcon-back" @tap="goback()"></text>
				<text class="cuIcon-home" @tap="toHome"></text>
			</view>
			<view class="action" @tap="goback()" v-else-if="isBack">
				<text class="cuIcon-back"></text>
				<slot name="backText"></slot>
			</view>
			<!-- #endif -->


			<view class="content" :style="[{top:StatusBar + 'px'}]">
				<slot name="content"></slot>
			</view>
			<slot name="right"></slot>
		</view>
	</view>
</template>

<script>
	import {
		jumpTo,
		goback
	} from "@/utils/util.js"
	import {homePath} from "@/utils/constant.js"
	import Vue from "vue"
	export default {
		name: 'cu-custom',
		computed: {
			StatusBar(){
				return Vue.prototype.StatusBar
			},
			CustomBar(){
				return Vue.prototype.CustomBar
			}
		},
		props: {
			bgColor: {
				type: String,
				default: ''
			},
			isCustom: {
				type: [Boolean, String],
				default: false
			},
			isBack: {
				type: [Boolean, String],
				default: true
			},
			bgImage: {
				type: String,
				default: ''
			}
		},
		methods: {
			goback,
			toHome(){
				uni.reLaunch({
					url:homePath
				})
			}
		}
	}
</script>

<style>

</style>
